<!DOCTYPE html>
<html>
<head>
  <title>ShadowRoot hit tests</title>
  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="../layout.js"></script>

  <script type="application/javascript">
    function doTest()
    {
      var componentAcc = getAccessible('component1');
      testChildAtPoint(componentAcc, 1, 1, componentAcc.firstChild,
                       componentAcc.firstChild);

      componentAcc = getAccessible('component2');
      testChildAtPoint(componentAcc, 1, 1, componentAcc.firstChild,
                       componentAcc.firstChild);
      SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>
</head>
<body>

  <a target="_blank"
     title="Test getChildAtPoint works for shadow DOM content"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=1027315">
    Mozilla Bug 1027315
  </a><br/>
  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <div role="group" class="components" id="component1" style="display: inline-block;">
  <!--
    <div role="button" id="component-child"
         style="width: 100px; height: 100px; background-color: pink;">
    </div>
  -->
  </div>
  <div role="group" class="components"  id="component2" style="display: inline-block;">
  <!--
    <button>Hello world</button>
  -->
  </div>
  <script>
    // This routine adds the comment children of each 'component' to its
    // shadow root.
    var components = document.querySelectorAll('.components');
    for (var i = 0; i < components.length; i++) {
      var component = components[i];
      var shadow = component.createShadowRoot();
      for (var child = component.firstChild; child; child = child.nextSibling) {
        if (child.nodeType === 8)
          shadow.innerHTML = child.data;
      }
    }
  </script>

</body>
</html>
